'use client';
import 'bytemd/dist/index.css';
import 'highlight.js/styles/vs.css';
import './index.css';
import { Avatar, Card, List, Typography } from 'antd';
import React from 'react';
import Link from 'next/link';

interface Props {
  bankList: API.QuestionBank[];
}

/**
 * Markdown 编辑器
 * @param props
 * @constructor
 */
const BankList = (props: Props) => {
  const { bankList = [] } = props;

  return (
    <div className="bank-list">
      <List
        grid={{
          gutter: 16,
          column: 4,
          xs: 1,
          sm: 2,
          md: 3,
          lg: 3,
        }}
        dataSource={bankList}
        renderItem={(item: API.QuestionBank) => (
          <List.Item>
            <Card>
              <Link href={`/bank/${item.id}`}>
                <Card.Meta
                  avatar={<Avatar src={item.picture} />}
                  title={item.title}
                  description={
                    <Typography.Paragraph
                      type="secondary"
                      ellipsis={{ rows: 1 }}
                      style={{ marginBottom: 0 }}
                    >
                      {item.description}
                    </Typography.Paragraph>
                  }
                />
              </Link>
            </Card>
          </List.Item>
        )}
      />
    </div>
  );
};

export default BankList;
